<template>
  <div class="hello">
      <div class="box" ref="box">
        <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
        <!-- <div v-for="(item,index) in list" :key="index" v-show="item.activation"
         :style="{
              animationName: 'example'+(randomNum) }">
            {{item.text}}
        </div> -->

      </div>
      <div class="tools">
          <input type="text" v-model="textVal"  > <button type="button" @click="btn_M()">Click Me!</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data: function () {
    return {
      textVal: '',
      boxrWidth: '', // 盒子宽度
      boxHeight: '', // 盒子高度
      timer: null, // 计时器
      new_time: 0, // 当前时间(可理解为当前视频播放到的时间比如:13:56)
      list: [
        {
          text: 'lallala----1',
          time: 1,
          activation: false
        },
        {
          text: 'lallala----1111',
          time: 1,
          activation: false
        },
        {
          text: 'lallala----2',
          time: 5,
          activation: false
        },

        {
          text: 'lallala----6',
          time: 6,
          activation: false
        },
        {
          text: 'lallala----12',
          time: 12,
          activation: false
        }
      ] // 弹幕集合信息
    }
  },
  created () {

  },
  mounted () {
    this.boxrWidth = this.$refs.box.offsetWidth
    this.boxHeight = this.$refs.box.offsetHeight

    this.init()
  },
  methods: {
    init () {
      this.new_time = 0
      var box = this.$refs.box
      const list = this.list
      this.timer = setInterval(() => {
        var div
        for (let i = 0; i < list.length; i++) {
          var randomNum = Math.round(Math.random() * 3)
          if (list[i].time === this.new_time) {
            div = document.createElement('div')
            div.className = `animation${randomNum}`
            div.innerHTML = list[i].text
            div.id = 'bullet' + i
            box.appendChild(div)
            setTimeout(() => {
              box.removeChild(document.getElementById('bullet' + i))
            }, 9000)
          }
        }
        this.new_time++
      }, 1000)
    },
    delete (index) {
      this.todos.splice(index, 1)
    },
    btn_M () {
      this.list.push({
        text: JSON.stringify(this.textVal),
        time: this.new_time + 2 // 弹幕发送完之后两秒之后开始出现
      })
      this.textVal = ''
    }
    /* 用正则表达式实现html解码 */

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.box{
  width: 100%;
  height: 500px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
  div{
    position: absolute;

    border: 1px solid #0001;
    // transition: all 0.5s;
    white-space:nowrap;

    animation-duration: 10s;
    animation-timing-function:linear;

  }
}
.animation0{
  animation-name:example0;
}
.animation1{
  animation-name:example1;
}
.animation2{
  animation-name:example2;
}
.animation3{
  animation-name:example3;
}
@keyframes example0 {
  from { top: 10%;
        right: -10%;
    }
  to {
        top: 10%;
        right: 120%;
  }
}
@keyframes example1 {
  from { top: 30%;
        right: -10%;
    }
  to {
        top: 30%;
        right: 120%;
  }
}
@keyframes example2 {
  from { top: 60%;
        right: -10%;
    }
  to {
        top: 60%;
        right: 120%;
  }
}
@keyframes example3 {
  from { top: 80%;
        right: -10%;
    }
  to {
        top: 80%;
        right: 120%;
  }
}
.tools{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
